<template>
  <div class="audioItem">
    <img src="../../../assets/audio.png" alt="" class="audio">
    <div class="info">
      <a class="title" :href="data.url" target="_blank">{{data.name}}</a>
      <div class="createTime">创建于：{{dateFormat(data.createTime)}}</div>
      <div class="downloads">下载量：{{data.downloadNum}}</div>
      <i class="time">{{formatTime(data.time)}}</i>
      <div class="operate">
        <i class="icon icon-delete" @click="handleDel" title="删除"></i>
        <a :href="`${baseUrl}/content/source/download?sourceIds=${data.id}&__token=${token}`" class="icon icon-xiazai download" download></a>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapActions} from 'vuex'
  import env from '@/config/env'
  export default {
    props: ['data'],
    computed: {
      baseUrl () {
        return env.baseUrl
      },
      token () {
        return localStorage.getItem('UBToken')
      }
    },
    methods: {
      ...mapActions(['delSource']),
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD')
      },
      // 时长格式化
      formatTime (time) {
        return this.$_.padStart(Math.floor(time / 60).toString(), 2, 0) + ':' + this.$_.padStart((time % 60).toString(), 2, 0)
      },
      // 删除
      handleDel () {
        this.$confirm('是否确认删除', '确认', {type: 'warning'})
          .then(() => {
            return this.delSource([this.data.id])
          })
          .then(res => {
            this.$bus.$emit('reloadSource')
          })
      }
    }
  }
</script>
<style lang="scss">
  .audioItem{
    position:relative;margin:8px;padding:8px;width:308px;height:78px;border:1px solid #d3dce6;border-radius:4px;box-sizing:border-box;
    .audio{float:left;width:60px;height:60px;}
    .info{margin-left:74px}
    .title{display:block;margin-right:30px;font-size:16px;text-decoration:none;color:#5e6b7c;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
    .createTime{color:#a1b0c4}
    .downloads{color:#a1b0c4}
    .time{position:absolute;top:10px;right:10px;font-size:14px;color:#a1b0c4}
    .operate{position:absolute;bottom:8px;right:10px;height:16px;line-height:16px;}
    .download{font-size:12px;color:#475669;vertical-align:middle;}
    .icon-delete{vertical-align:middle;cursor:pointer;}
  }
</style>
